<template>
    <vk-data-dialog v-model="value.show" :title="page.title" :top="page.top" :width="page.width" mode="form"
        @open="onOpen" @closed="onClose" :close-on-click-modal="true">
        <div :id="`tableId-${i}`" v-for="(v, i) in value.printData" :key="i" :style="{}">
            <div>
                <div style="width: 806px; align-content: center;">
                    <div style=" z-index: -1;display: flex;
                        -ms-flex-align: center;
                        align-items: center;
                        -ms-flex-pack: center;
                        justify-content: center;
                        -ms-flex-direction: column;
                        flex-direction: column;">
                        <div>
                            <table class="daying" style=" border-spacing: 0;border: none;
                                            width: 100%;
                                            margin-top: 20px;
                                            border-collapse: collapse;
                                            font-family: 宋体;
                                            color: #000">
                                <tr>
                                    <td rowspan="3" align="right" style="border: none; overflow-wrap: normal;"><img
                                            src="@/static/quanan-log.png" height="80px" width="90px"></td>
                                    <td style="border: none;"></td>
                                </tr>
                                <tr>
                                    <td style="border: none;"></td>
                                    <td colspan="2" align="left" style="border: none; font-weight: bold;">
                                        <span style="font-size: 32px; color: black; line-height: 35px;">广 东 全
                                            安 检 测 科 技 有 限 公
                                            司</span>
                                    </td>&nbsp;

                                </tr>
                                <tr>
                                    <td style="border: none;"></td>
                                    <td align="left" style="border: none; font-weight: bold;"><label
                                            style="color: black; font-size: 26px;">GuangDong QuanAn Testing
                                            Technology Co.,Ltd</label></td>
                                </tr>
                            </table>
                        </div>
                        <div
                            style="width: 90%; height: 2px; padding: 0px; background-color: black; overflow: hidden; margin-top: 3px; font-weight: bold;">
                        </div>
                        <div
                            style="width: 90%; height: 1px; padding: 0px; background-color: black; overflow: hidden; margin-top: 2px; font-weight: bold;">
                        </div>
                        <div style="position: relative; width: 95%; font-family: 宋体;">
                            <div
                                style="display: inline-block; position: absolute; left: 50%; transform: translateX(-50%);">
                                <div style="font-size: 24px; color: black; margin-top: 10px;">
                                    检 测 报 告
                                </div>
                                <div style="font-size: 24px; color: black; margin-top: 30px; font-family: 宋体;">
                                    TEST REPORT
                                </div>
                            </div>
                            <div style="display: inline-block; margin-left: 79%; margin-top: 5px;">
                                <vue-qr :logoSrc="logourl" :margin="3"
                                    :text="`http://www.gdquanan.com/#/pages/qr_info/d?no=${v.no}`" :size="130"></vue-qr>
                                <div style=" text-align: center; font-size: 10px;line-height: 12px; font-family: 宋体;">
                                    扫描二维码辨别报告真伪
                                </div>
                            </div>
                        </div>
                        <div style="width: 90%;">
                            <div><span
                                    style="color: black; font-weight: bold; font-size: 16px; font-family: 黑体;">报告编号：</span>
                                <span style="font-size: 16px; font-family: 宋体; color: black;">{{ v.no }}</span>
                            </div>
                            <div>
                                <table class="daying" style="border-spacing: 0;
                            width: 100%;
                            border-collapse: collapse;
                            font-family: 宋体;
                            color: #000">
                                    <tr>
                                        <td align="center" style="width: 15%; height: 30px;"><span
                                                style="color: black; font-weight: bold; font-size: 16px; font-family: 黑体;">委托单位/人</span>
                                        </td>
                                        <td align="center" style="width: 35%;"><span style="font-size: 16px;">{{
                                                v.client_name }}</span></td>
                                        <td align="center"><span
                                                style="color: black; font-weight: bold; font-size: 16px; font-family: 黑体;">送检日期</span>
                                        </td>
                                        <td align="center"><span style="font-size: 16px;">{{
                                                vk.pubfn.timeFormat(v.detect_time, "yyyy年MM月dd日") }}</span></td>
                                    </tr>
                                    <tr>
                                        <td align="center" style="height: 30px;"><span
                                                style="color: black; font-weight: bold; font-size: 16px; font-family: 黑体;">抽/送样者</span>
                                        </td>
                                        <td align="center"><span style="font-size: 16px;">{{ v.submitUser }}</span></td>
                                        <td align="center"><span
                                                style="color: black; font-weight: bold; font-size: 16px; font-family: 黑体;">检测类别</span>
                                        </td>
                                        <td align="center"><span style="font-size: 16px;">
                                                {{ v.detection_type }}</span></td>
                                    </tr>
                                    <tr>
                                        <td align="center" style="height: 30px;"><span
                                                style="color: black; font-weight: bold; font-size: 16px; font-family: 黑体;">检测项目</span>
                                        </td>
                                        <td align="center"><span style="font-size: 16px;">{{
                                                v.detection_standard_name }}</span></td>
                                        <td align="center"><span
                                                style="color: black; font-weight: bold; font-size: 16px; font-family: 黑体;">检测标准</span>
                                        </td>
                                        <td align="center"><span style="font-size: 16px;">{{
                                                v.detection_standard }}</span>
                                        </td>
                                    </tr>
                                </table>
                            </div>
                        </div>
                        <div
                            style="align-items: center; font-size: 18px; margin-top: 6px; margin-bottom: 6px; font-family: 宋体; color: black;">
                            检 测 结 果</div>
                        <div style="width: 90%;">
                            <div>
                                <div>
                                    <table class="daying" style=" border-spacing: 0;
                                    width: 100%;
                                    border-collapse: collapse;
                                    font-family: 宋体;
                                    color: #000">
                                        <tr style="height: 30px;">
                                            <td align="center"><span
                                                    style="font-weight: bold; font-size: 16px; font-family: 黑体;">序号</span>
                                            </td>
                                            <td align="center"><span
                                                    style="color: black; font-weight: bold; font-size: 16px; font-family: 黑体;">样品编号</span>
                                            </td>
                                            <td align="center"><span
                                                    style="color: black; font-weight: bold; font-size: 16px; font-family: 黑体;">样品名称</span>
                                            </td>
                                            <td align="center" colspan="2"><span
                                                    style="color: black; font-weight: bold; font-size: 16px; font-family: 黑体;">检测结论</span>
                                            </td>
                                            <td align="center" colspan="2"><span
                                                    style="color: black; font-weight: bold; font-size: 16px; font-family: 黑体;">样品结果</span>
                                            </td>
                                            <td align="center"><span
                                                    style="color: black; font-weight: bold; font-size: 16px; font-family: 黑体;">备注</span>
                                            </td>
                                        </tr>

                                        <!-- 动态行高和字体大小 -->
                                        <tr v-for="(detail, index) in v.sample_list" :key="index"
                                            :style="{ height: calcRowHeight(v.sample_list.length) + 'px', fontSize: calcFontSize(v.sample_list.length) + 'px' }">
                                            <td align="center">{{ index + 1 }}</td>
                                            <td align="center">{{ detail.sampleno }}</td>
                                            <td align="center">{{ detail.samplename }}</td>
                                            <td align="center" colspan="2">{{ detail.result }}</td>
                                            <td align="center" colspan="2">{{ detail.yxresult }}</td>
                                            <td align="center">{{ detail.remark }}</td>
                                        </tr>
                                    </table>
                                </div>
                            </div>
                        </div>
                        <div
                            style="width: 90%; font-size: 16px; font-weight: bold; margin-top: 3%; margin-bottom: 10%; position: relative;">

                            <div
                                style="z-index: 999; position: absolute; transform: translateX(-140%) translateY(-27%); margin-left: 100%;background-color: transparent;">
                                <img src="https://mp-5fe77170-8511-415d-8f6e-02d647d2979a.cdn.bspapp.com/cloudstorage/b79544a0-ae47-4ab4-b62f-8ca500865b90.png"
                                    width="150px;" height="150px;">
                            </div>
                            <div
                                style="margin-left: 100%; white-space: nowrap; position: absolute; transform: translateX(-100%); font-family: 黑体;">
                                此处未盖本公司快检专用章，则本报告无效。
                            </div>
                        </div>
                        <div style="display: flex; flex-direction: row; justify-content: space-between; width: 90%;">
                            <div
                                style="width: 33%; font-size: 16px; font-weight: bold; font-family: 黑体; display: flex; position: relative;">
                                <div>检测人:</div>
                                <div style="position: absolute; left: 28%; top: -80%;"><span>
                                        <img v-if="$fn.isNotNull(v.detection_user_info.sign_image)" width="100px"
                                            height="40px" :src="v.detection_user_info.sign_image">
                                    </span>
                                </div>
                            </div>
                            <div
                                style="width: 33%; font-size: 16px; font-weight: bold; font-family: 黑体; display: flex; position: relative;">
                                <div>审核人:</div>
                                <div style="position: absolute; left: 28%; top: -60%;">
                                    <img src="https://mp-5fe77170-8511-415d-8f6e-02d647d2979a.cdn.bspapp.com/cloudstorage/097aaf25-357c-44d6-8325-27a73b5efde6.png"
                                        width="100px" height="40px">
                                </div>
                            </div>
                            <div style="width: 34%;"><span
                                    style="font-size: 16px; font-weight: bold; font-family: 黑体;">签发日期:</span> <span
                                    style="font-family: 宋体; font-size: 16px; color: black;">{{
                                    vk.pubfn.timeFormat(v.detect_time, "yyyy年MM月dd日") }}</span></div>
                        </div>
                        <div style="width: 90%; margin-top: 20px;"><span
                                style="color: black; font-size: 11px; line-height: 13px; font-family: 宋体;">
                                <span
                                    style="font-weight: bold; font-size: 14px;line-height: 20px; font-family: 黑体;">注：请客户仔细阅读检测报告的申明</span>
                                <br>1. 委托单位信息和抽、送样者信息由委托方提供及确认，本检测室不对其真实性负责。
                                <br>2. 报告无“快检专用章”无效；报告随意涂改无效。
                                <br>3. 当结果未超出相关要求时，检测结果为“经检测XX残留量未超出相关要求”。
                                <br>4. 本报告仅对来样负责，若客户无特殊要求，已检样品将不作保存。
                                <br>5. 如果对检测报告有异议，应于报告出具之日起五日内向本公司提出，或者到有资质的权威检测机构进行验证，逾期不予受理。
                                <br>6. 若对报告真伪有疑问，可致电：13922173334、13760015306
                            </span></div>
                        <div
                            style="width: 90%; height: 2px; padding: 0px; background-color: black; overflow: hidden; margin-top: 3px; font-weight: bold;">
                        </div>
                        <div
                            style="width: 90%; height: 1px; padding: 0px; background-color: black; overflow: hidden; margin-top: 2px; font-weight: bold;">
                        </div>
                        <div
                            style="display: flex; align-content: space-between; width: 90%;color: #606266;margin-top: 10px;">
                            <div style="font-size: 12px; font-family: 黑体;">广 东 全 安 检 测 科 技 有 限 公 司</div>
                            <div
                                style="margin-left: 15%; font-size: 12px; font-family: 黑体; align-content: flex-end;color: #606266;">
                                地址：广州市白云区永平街永泰新村和街七巷22号之四5楼502房</div>
                        </div>
                        <div style="display: flex; width: 90%;">
                            <div style="font-size: 12px; font-family: 黑体;color: #606266;">GuangDong QuanAn Testing
                                Technology
                                Co.,Ltd
                            </div>
                            <div style="margin-left: 9.5%; font-size: 12px; font-family: 黑体;color: #606266;">
                                客服电话：020-32784686</div>
                        </div>
                    </div>
                </div>
            </div>
        </div>


        <template v-slot:footer="{ close }">
            <!--这里是底部插槽-->
            <el-button @click="print">打 印</el-button>
            <el-button @click="close">取 消</el-button>
            <el-button type="primary" @click="close">确 定</el-button>
        </template>
    </vk-data-dialog>
</template>

<script>
import {
    getLodop
} from '@/common/function/LodopFuncs.js'
import VueQr from 'vue-qr';
import Print from 'print-js'
var that; // 当前页面对象
var vk = uni.vk; // vk实例
export default {
    components: {
        VueQr
    },
    props: {
        value: {
            Type: Object,
            default: function () {
                return {
                    show: false,
                    printData: []
                };
            }
        },
    },
    data: function () {
        // 组件创建时,进行数据初始化
        return {
            page: {
                title: "标题",
                submitText: "确定",
                cancelText: "关闭",
                showCancel: true,
                top: "3vh",
                width: "806px",

            },
            form1: {
                // 表单请求数据，此处可以设置默认值
                data: {

                },
                // 表单属性
                props: {
                    // 表单请求地址
                    action: "admin/bidding-booths/sys/batchUpdateBiddingTime",
                    // 表单字段显示规则
                    columns: [

                        {
                            key: "location", title: "展位位置", type: "remote-select", placeholder: "请选择分类",
                            action: "admin/bidding-places/sys/getList",
                            props: { list: "rows", value: "_id", label: "name" },
                            showAll: true,
                            actionData: {
                                pageSize: 1000
                            }, width: 300
                        },
                        { key: "selectfile", title: "选择文件", type: "text" },

                    ],
                    // 表单验证规则
                    rules: {

                    },
                    // 左侧label的宽度
                    labelWidth: "100px",
                    // 提交前执行
                    beforeAction: function (formData) {

                        formData.booths_ids = that.value.item.booths_ids;

                        return formData;
                    },
                }
            },
            logourl: require('@/static/logo.png')
        };
    },
    mounted() {
        that = this;

        that.init();
    },
    methods: {
        // 初始化
        init() {
            let { value } = that;



            //that.$emit("input", value);
        },
        handleImport() {
            this.$refs.file.click()
        },
        // 监听 - 页面打开
        onOpen() {

            that = this;
            let { item = {} } = that.value;
            that.form1.props.show = true;

        },
        // 监听 - 页面关闭
        onClose() {
            that.$refs.form1.resetForm(); // 关闭时，重置表单
        },
        // 监听 - 提交成功后
        onFormSuccess() {
            that.value.show = false; // 关闭页面
            that.$emit("success");
        },
        print() {
            const LODOP = getLodop()

            try {
                if (LODOP.VERSION) {
                    LODOP.PRINT_INIT("检测单打印");
                    LODOP.SET_PRINT_PAGESIZE(1, 0, 0, 'A4')  //设置横向

                    for (let i = 0; i < this.value.printData.length; i++) {
                        var strBodyStyle = '<style>'
                        strBodyStyle += 'table { border-top: 1 solid #000000; border-left: 1 solid #000000;  border-collapse:collapse;  border-spacing:0;}'
                        strBodyStyle += 'caption {  line-height:2em; }'
                        strBodyStyle += 'td { border-right: 1 solid #000000; border-bottom: 1 solid #000000; text-align:center; padding:2px 3px; font-size:11px;}'
                        strBodyStyle += '</style>' //设置打印样式
                        var strFormHtml = strBodyStyle + '<body>' + document.getElementById(`tableId-${i}`).innerHTML + '</body>'   //获取打印内容

                        LODOP.ADD_PRINT_HTM(0, 0, "90%", "90%", strFormHtml);
                        LODOP.SET_PRINT_STYLEA(0, "Vorient", 4);
                        LODOP.SET_PRINT_MODE("CATCH_PRINT_STATUS", true);
                        LODOP.NewPageA()
                        LODOP.SET_PRINT_MODE("AUTO_CLOSE_PREWINDOW", true);

                        LODOP.SET_PRINT_MODE("RESELECT_PAGESIZE", true)
                        LODOP.SET_SHOW_MODE("LANDSCAPE_DEFROTATED", 1);//横向时的正向显示

                    }
                    LODOP.PREVIEW()
                }
            } catch (error) {
                console.error(error)
                window.open('https://mp-5fe77170-8511-415d-8f6e-02d647d2979a.cdn.bspapp.com/print/CLodop_Setup_for_Win32NT.exe');
            }

        },
        print2() {
            for (let i = 0; i < this.value.printData.length; i++) {
                printJS({
                    printable: `tableId-${i}`, // 'printFrom', // 标签元素id
                    type: 'html',
                    header: '', // '表单',
                    targetStyles: ['*'],
                    style: '@page {margin:1 1mm};', // 可选-打印时去掉眉页眉尾
                    ignoreElements: [], // ['no-print']
                    properties: null
                })
            }



        },
        // 根据 sample_list 长度计算行高
        calcRowHeight(length) {
            // return length < 20 ? 30 : 20;
            return 30;
        },
        // 根据 sample_list 长度计算字体大小
        calcFontSize(length) {
            return 14;
            //  return length < 20 ? 14 : 10;
        }
    },
    // 监听属性
    watch: {
        'value.printData'(val) {

            val.forEach(element => {
                if (element.sample_list.length < 10) {
                    const row = 10 - element.sample_list.length
                    for (let i = 0; i < row; i++) {
                        element.sample_list.push({
                            sampleno: i == 0 ? '以下空白' : ''

                        })
                    }

                } else if (element.sample_list.length > 10 && element.sample_list.length < 20) {
                    const row = 20 - element.sample_list.length
                    for (let i = 0; i < row; i++) {
                        element.sample_list.push({
                            sampleno: i == 0 ? '以下空白' : ''

                        })
                    }
                } else if (element.sample_list.length > 10 && element.sample_list.length < 30) {
                    const row = 30 - element.sample_list.length
                    for (let i = 0; i < row; i++) {
                        element.sample_list.push({
                            sampleno: i == 0 ? '以下空白' : ''

                        })
                    }
                } else if (element.sample_list.length > 10 && element.sample_list.length < 40) {
                    const row = 40 - element.sample_list.length
                    for (let i = 0; i < row; i++) {
                        element.sample_list.push({
                            sampleno: i == 0 ? '以下空白' : ''

                        })
                    }
                }
            });
        }
    },
    // 计算属性
    computed: {

    }
};
</script>

<style lang="scss" scoped>
.daying {
    border-spacing: 0;
    width: 100%;
    border-collapse: collapse;
    font-family: 宋体;
    color: #000
}

.daying td {
    border: 1px solid #000;
    height: 15px
}

.daying td label {
    font-size: 14px
}

.daying td span {
    font-size: 16px
}

.page-footer {
    position: fixed;
    bottom: 0;
    width: 100%
}


// .print_content {
//     -webkit-print-color-adjust: exact;
//     -moz-print-color-adjust: exact;
//     -ms-print-color-adjust: exact;
//     print-color-adjust: exact
// }</style>
